<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Jx.Toolbar Examples</title>

    <link type="text/css" rel="stylesheet" href="../../lib/themes/crispin/jxtheme.uncompressed.css">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../../lib/mootools-core.js"></script>
<script type="text/javascript" src="../../lib/mootools-more.js"></script>
<script type="text/javascript" src="../../lib/jxlib.standalone.uncompressed.js"></script>
<script src="js/locale.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
window.addEvent('load', function() {
    testFn();
});

</script>

<script id="hToolbarScript" type="text/javascript">
function testFn() {

    var container = $('container');
    new Jx.Layout(container, {width: null}).resize();

    var p = new Jx.Panel({parent: container});

    var splitter = new Jx.Splitter(p.content,{
        layout: 'horizontal',
        useChildren: false,
        containerOptions: [{width: null},{width: 300}],
        barOptions: [{snap: 'after'}]
    });

    var splitV = new Jx.Splitter(splitter.elements[0],{
        layout: 'vertical',
        useChildren: false,
        containerOptions: [{height: 100},{height: null}]
    });

    //split the bottom using a splitter
    var splitH = new Jx.Splitter(splitV.elements[1],{
        layout: 'horizontal'
    });

    container.resize();

};
</script>

<style>
#container {
    width: 100%;
    height: 100%;
    background-color: red;
}
</style>
</head>
<body>

<div id="container"></div>

</body>
</html>
